<template>
  <div>
    <!--卡片视图区域-->
    <el-card>
      <!--查询条件表单区域-->
      <el-row>
        <el-form label-position="left" :inline="true" :model="queryForm">
          <el-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">
            <el-form-item label="课程名称" size="small">
              <el-select v-model="queryForm.name" placeholder="课程名称" size="small">
                <el-option v-for="course in courseList"
                           :key="course.courseId"
                           :label="course.courseName"
                           :value="course.courseId"
                           size="small">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
            <el-button type="primary" @click="filterData(queryForm.name)" size="small ">查询</el-button>
          </el-col>
        </el-form>
      </el-row>
      <!--成绩列表-->
      <el-row>
        <el-table
          :data="reportList" border stripe>
          <el-table-column type="index" label="#"></el-table-column>
          <el-table-column prop="name" label="学生姓名"></el-table-column>
          <el-table-column prop="id" label="学号"></el-table-column>
          <!--          <el-table-column prop="company" label="是否团队"></el-table-column>-->
          <!--          <el-table-column prop="company" label="团队成员"></el-table-column>-->
          <!--          <el-table-column prop="grade" label="状态"></el-table-column>-->
          <el-table-column v-for="exp in expList"
                           :key="exp.experId"
                           :label="exp.experName"
                           :value="exp.experId"
                           align="center">
            <el-table-column
              prop="pre"
              label="预习成绩"
              width="120">
            </el-table-column>
            <el-table-column
              prop="acc"
              label="验收成绩"
              width="120">
            </el-table-column>
            <el-table-column
              prop="rep"
              label="报告成绩"
              width="120">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="grade" label="总成绩"></el-table-column>
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      queryForm: {
        name: ''
      },
      courseList: [],
      expList: [],
      reportList: [{
        name: 'yll',
        id: 'B17040417'
      }, {
        name: 'lpl',
        id: 'B17040416'
      }],
      defaultCourse: ''
    }
  },
  async created () {
    await this.getCoursesList()
    this.queryForm.name = this.defaultCourse.courseId
    await this.filterData(this.queryForm.name)
  },
  methods: {
    async getCoursesList () {
      // 获取课程id列表
      const { data: res } = await this.$http.post('/queryTeacherCourseList')
        .catch((error) => {
          console.log(error)
          this.$message.error('接口请求失败')
        })
      if (res.status !== 200) this.$message.error(res.data.msg)
      if (res.status === 200) {
        this.courseList = res.data.data
        this.defaultCourse = this.courseList[0]
      }
    },
    async getExpList (courseId) {
      // 获取课程id列表
      const { data: res } = await this.$http.post('/getExperimentListByCourseId', { courseId: courseId })
        .catch((error) => {
          console.log(error)
          this.$message.error('接口请求失败')
        })
      if (res.status !== 200) this.$message.error(res.data.msg)
      if (res.status === 200) {
        this.expList = res.data.experList
        // this.defaultCourse = this.courseList[0]
      }
    },
    async filterData (courseId) {
      await this.getExpList(courseId)
      console.log(this.expList)
    }
  }
}
</script>

<style scoped>

</style>
